/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

    // Initialisation de variables globales au script

    // Initialisation des indicateurs de bonnes réponses à donner pour chaque environnement
    var tab_bonnes_reponses_e1 = Array('item_1_1','item_1_2','item_1_3');
    var tab_bonnes_reponses_e2 = Array('item_2_1','item_2_2','item_2_3');
    var tab_bonnes_reponses_e3 = Array('item_3_1','item_3_2','item_3_3','item_3_4');
    var tab_bonnes_reponses_e4 = Array('item_4_1','item_4_2','item_4_3','item_4_4');
    
    var btn_check_actif = false;
    var nb_items_deposees = 0;

    // Initialisation de l'indicateur d'environnement (ou niveau) dans lequel se trouve l'utilisateur
    // Au début : environnement/niveau 1
    // Cette variable est mise à jour au moment du changement d'environnement, lors de l'appel AJAX
    var environment = 1;
    
    // Initialisation des variables utilisées pour gérer le compteur de temps
    var timer_width = 0;
    var animating = false;


    // Au lancement de l'environnement 1 du jeu 1
    $(document).ready(function(){

        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
        load_jquery_properties();
    });
    
    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
    function load_jquery_properties(){

        nb_items_deposees = 0;
        btn_check_actif = false;
        
        // Gestion du compteur de temps
        animating = false;
        // Fonction exécutée à intervales de temps réguliers
        window.setInterval(function() {

            if(animating == false){
                // Si la taille a atteint son maximum
                if(timer_width < 450){

                    animating = true;
                    if(timer_width < 150){
                        $('#timing').css('background-color','#00FF00');
                    }
                    if((timer_width > 150) && (timer_width < 300)){
                        $('#timing').css('background-color','#FF6600');
                    }
                    if(timer_width > 300){
                        $('#timing').css('background-color','#FF0000');
                    }

                    $('#timing').animate({
                        width: "+=5px"
                        //$('#timing').delay(200).fadeIn('slow');delay(200)
                    }, 400, function(){
                        animating = false;
                    });
                    timer_width = timer_width+5;
                }
            }

        }, 400);


        // Initialisation de l'indicateur du nombre de bonnes réponses données par l'utilisateur
        var tab_bonnes_reponses_user = Array('','','');
        var tab_bonnes_reponses_environment = Array();

        // On mémorise le nombre de bonnes réponses à donner en fonction de l'environnement
        switch(environment){
            case 1:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e1;
            break;
            case 2:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e2;
            break;
            case 3:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e3;
                tab_bonnes_reponses_user.push('');
            break;
            case 4:
                tab_bonnes_reponses_environment = tab_bonnes_reponses_e4;
                tab_bonnes_reponses_user.push('');
            break;
        }


        // Initialisation de variables devant stocker temporairement les données d'un objet en train d'être déplacé :
        // - son id
        var id_tmp = '';
        // - ses coordonnées
        var top_tmp = 0;
        var left_tmp = 0;

        // SI on se situe dans les environnements 3 ou 4
        if((environment == 3) || (environment == 4)){
            // On repositionne les emplacements d'items rendre l'ensemble cohérent
            $('#empl_item_1').css('left', '10.7%');
            $('#empl_item_2').css('left', '25.5%');
            $('#empl_item_3').css('left', '40.4%');
            $('#empl_item_4').css('left', '55.2%');
        }


        // On charge l'écran en fondu
        $('#content').fadeIn(1000);

        // On rend draggable les items
        $('.item_draggable').draggable({disabled: false, containment:'window'});

        // Au clic sur le bouton 'replay', on recharge la page pour recommencer le jeu
        $('#btn_replay').click(function(){
            $('#content').css('display', 'none');
            location.reload();
        });

        // Au clic sur un élément, mémorisation de l'id et des coordonnées de l'élément en train d'être déplacé
        // Pour tous les environnements, on a au moins 3 items
        // On change également le curseur Pixou
        $('#item_'+environment+'_1').mousedown(function(){
            id_tmp = 'item_'+environment+'_1';
            left_tmp = $('#item_'+environment+'_1').offset().left;
            top_tmp = $('#item_'+environment+'_1').offset().top;
            $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
        });
        $('#item_'+environment+'_2').mousedown(function(){
            id_tmp = 'item_'+environment+'_2';
            left_tmp = $('#item_'+environment+'_2').offset().left;
            top_tmp = $('#item_'+environment+'_2').offset().top;
            $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
        });
        $('#item_'+environment+'_3').mousedown(function(){
            id_tmp = 'item_'+environment+'_3';
            left_tmp = $('#item_'+environment+'_3').offset().left;
            top_tmp = $('#item_'+environment+'_3').offset().top;
            $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
        });


        // Pour les environnements 3 et 4, on a 4 items
        // Si l'utilisateur se trouve dans un de ces niveaux, on rajoute l'événement
        if((environment == 3) || (environment == 4)){
            $('#item_'+environment+'_4').mousedown(function(){
                id_tmp = 'item_'+environment+'_4';
                left_tmp = $('#item_'+environment+'_4').offset().left;
                top_tmp = $('#item_'+environment+'_4').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
        }

        // On change le curseur au survol d'un item
        $(".item_draggable").hover(
            function () {
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_hover.png), auto');
            },
            // Lorsqu'on ne survole plus l'item, on retrouve le curseur classique
            function () {
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse.png), auto');
            }
        );



        // Traitement lorsque l'on relache la souris
        $('.item_draggable').mouseup(function(){

            // On détecte si l'objet est déposé sur un emplacement par appel de la fonction "detectIntersection"
            // et on récupère le numéro de l'emplacement où doit être déposée l'objet
            var success = detectIntersection(id_tmp);
            // Si l'objet est déposé à un emplacement
            if(success>0){
                // 1. Dépose de l'item à l'emplacement associé
                // Récupération des coordonnées de l'emplacement de l'item
                var placement_left = $('#empl_item_'+success).offset().left;
                var placement_top = $('#empl_item_'+success).offset().top;

                // Récupération des coordonnées de dépose de l'item
                var current_left = $('#'+id_tmp).offset().left;
                var current_top = $('#'+id_tmp).offset().top;

                // On calcule le déplacement à faire pour positionner précisément l'item
                var place_left = placement_left - current_left;
                var place_top = placement_top - current_top;
                
                // Si l'emplacement est vide
                if(tab_bonnes_reponses_user[success-1] == ''){
                    nb_items_deposees++;
                    if((environment == 1) || (environment == 2)){
                        if(nb_items_deposees == 3){
                            btn_check_actif = true;
                            $('#img_btn_check').attr('src','../../assets/images/game2/btn_check_ok.png');
                        }
                    }
                    if((environment == 3) || (environment == 4)){
                        if(nb_items_deposees == 4){
                            btn_check_actif = true;
                            $('#img_btn_check').attr('src','../../assets/images/game2/btn_check_ok.png');
                        }
                    }

                    // On place l'image au bon emplacement
                    $("#"+id_tmp).animate({"left": "+="+place_left+"px", "top": "+="+place_top+"px"}, "slow");

                    $(this).hover(
                        function () {
                            $(this).css('cursor','url(../../assets/images/commun/commun_mouse_hover.png), auto');
                        }, 
                        function () {
                            $(this).css('cursor','url(../../assets/images/commun/commun_mouse.png), auto');
                        }
                    );

                    // Avant d'écrire la valeur de l'id de l'item dans le tableau, on regarde
                    // s'il était présent à un autre emplacement
                    for(i=0;i<tab_bonnes_reponses_user.length;i++){
                        if(tab_bonnes_reponses_user[i] == id_tmp){
                            tab_bonnes_reponses_user[i] = '';
                        }
                    }
                    // On place la valeur de l'id dans le tableau de réponses de l'utilisateur
                    tab_bonnes_reponses_user[success-1] = id_tmp;
                }

                // Si l'emplacement n'est pas vide
                else{

                    // Si l'item répertorié sur l'emplacement est le même que celui en train d'être déplacé
                    if(tab_bonnes_reponses_user[success-1] == id_tmp){
                        // On le replace au même endroit
                        // => PAS de mise à jour du tableau de réponses nécessaire, il est déjà bien renseigné
                        $("#"+id_tmp).animate({"left": "+="+place_left+"px", "top": "+="+place_top+"px"}, "slow");
                    }

                    // S'il s'agit d'un item différent
                    else{

                        // Inversion de position entre les items

                        // Récupération des coordonnées de l'emplacement de l'item déjà placé
                        var item_placed_left = $('#'+tab_bonnes_reponses_user[success-1]).offset().left;
                        var item_placed_top = $('#'+tab_bonnes_reponses_user[success-1]).offset().top;

                        // On calcule le déplacement à faire pour positionner précisément l'item à partir
                        // des coordonnées d'origine de l'item en train d'être déplacé,
                        // mémorisées dans les variables 'left_tmp' et 'top_tmp'
                        var item_new_place_left = left_tmp - item_placed_left;
                        var item_new_place_top = top_tmp - item_placed_top;

                        // On déplace l'item à remplacer au bon emplacement
                        $("#"+tab_bonnes_reponses_user[success-1]).animate({"left": "+="+item_new_place_left+"px", "top": "+="+item_new_place_top+"px"}, "slow");
                        // On place l'item en train d'être déplacé au bon emplacement (dorénavant vide),
                        // et on fait appel à une fonction de callback
                        $("#"+id_tmp).animate({"left": "+="+place_left+"px", "top": "+="+place_top+"px"}, "slow", function(){

                            // On met à jour le tableau :
                            // 1. Sauvegarde de l'id de l'item à remplacer
                            var id_item_to_replace = tab_bonnes_reponses_user[success-1];

                            // On regarde si l'item en train d'être déplacé est bien placé à un emplacement
                            var item_moving = detectIntersection($(this).attr('id'));
                            if(item_moving > 0){
                                tab_bonnes_reponses_user[item_moving-1] = $(this).attr('id');
                            }
                            // 2. Pour l'item ayant été remplacé, on fait appel à la fonction d'intersection
                            var item_moved = detectIntersection(id_item_to_replace);
                            // Si la variable remonte un numéro d'emplacement
                            if(item_moved > 0){
                                // Alors on met à jour le tableau
                                tab_bonnes_reponses_user[item_moved-1] = id_item_to_replace;
                            }
                        });
                    }
                }

            }
            // Si l'item n'est pas déposé sur un emplacement
            else{
                // 1. L'objet se repositionne à l'endroit d'où il venait
                // Récupération des coordonnées de dépose
                var current_position_left = $('#'+id_tmp).offset().left;
                var current_position_top = $('#'+id_tmp).offset().top;
                // On calcule le déplacement à faire
                var move_left = left_tmp - current_position_left;
                var move_top = top_tmp - current_position_top;

                // On repositionne l'objet à son emplacement grâce aux données calculées
                $("#"+id_tmp).animate({"left": "+="+move_left+"px", "top": "+="+move_top+"px"}, "slow");

            }

            // Réinitialisation des variables mémorisant les informations de l'objet ayant été déplacé
            id_tmp='';
            top_tmp = 0;
            left_tmp = 0;

        });


        // Traitement lorsque l'on clique sur le bouton de validation de la séquence d'images
        $('#btn_check').click(function(){
            
            if(btn_check_actif){

                //1. on compare le tableau de résultats avec le tableau de l'utilisateur
                var reponses_ok = true;
                for(i=0;i<tab_bonnes_reponses_user.length;i++){
                    if(tab_bonnes_reponses_user[i] != tab_bonnes_reponses_environment[i])
                        reponses_ok = false;
                }
                // SI les tableaux sont identiques
                if(reponses_ok){
                    //alert('tab_bonnes_reponses_user : '+tab_bonnes_reponses_user);
                    //alert('tab_bonnes_reponses_environment : '+tab_bonnes_reponses_environment);
                    //  2a. On valide
                    //  3a. On décrémente la jauge de temps
                    //  4a. on change d'environnement

                    animating = true;
                    if(timer_width-30 < 0){
                        var tmp = timer_width-30;
                        tmp = 30 + tmp;
                        $('#timing').animate({
                            width: "-="+tmp+"px"
                        }, 100, function(){
                            timer_width = 0;
                            animating = false;
                        });
                    }
                    else{
                        $('#timing').animate({
                            width: "-=30px"
                        }, 100, function(){
                            timer_width = timer_width-30;
                            animating = false;
                        });
                    }

                    // Lancement d'une mini-animation de transition'
                    // .../... RAF, intégration d'un petit son de succès...
                    

                    // Incrémentation de l'indicateur d'environnement/niveau
                    environment++;

                    // Si on a fini l'environnement 4, le jeu est terminé
                    if(environment > 4){
                        $('#zone_interaction').animate({
                            opacity: "-=0.3"
                        });
                        $('#zone_basse').animate({
                            opacity: "-=0.3"
                        });
                        $('#end_game').fadeIn(800,function(){
                            $('#zone_interaction').delay(500).fadeOut(1000);
                            $(this).delay(500).fadeOut(1000);
                        });

                        $('#zone_basse').delay(1500).fadeOut(600, function(){

                            // On transmet la valeur du timer au controleur pour calculer le score
                            var data_result = {
                                    timer : timer_width
                                    };
                            // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                            $.ajax({
                                // url vers la méthode de chargement du nouvel environnement
                                url: 'endGame',
                                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                type: 'POST',
                                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                async : false,
                                // Données à transmettre et mises en forme précédemment
                                data: data_result,
                                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                    // Insertion de la vue du nouvel environnement chargée par le controleur
                                    $('#content').html(msg);
                                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                    $('#zone_result').fadeIn(2000);
                                }
                            });
                        });
                    }
                    else{
                        $('#zone_interaction').fadeOut(600, function(){

                        // Chargement AJAX du nouvel environnement
                        var data_test = {
                                ajax : '1',
                                environment : environment
                                };

                            // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                            $.ajax({
                                // url vers la méthode de chargement du nouvel environnement
                                url: 'loadNewEnvironment',
                                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                type: 'POST',
                                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                async : false,
                                // Données à transmettre et mises en forme précédemment
                                data: data_test,
                                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                    // Insertion de la vue du nouvel environnement chargée par le controleur
                                    $('#zone_interaction').html(msg);

                                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                    $('#zone_interaction').fadeIn(600, function(){
                                        // On rend draggable les items du nouvel environnement
                                        $('.item_draggable').draggable({disabled: false});

                                        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX
                                        load_jquery_properties();
                                    });
                                }
                            });
                        });
                    }
                }
                // SINON
                else{
                    //alert('mauvaises valeurs!! grrrrrRrRrrr');
                    //  2b. On indique qu'il y a une ou des erreurs et on continue l'animation
                    //  3b. On incrémente la jauge de temps
                    animating = true;
                    if((timer_width+30) < 450){
                        $('#timing').animate({
                            width: "+=30px"
                        }, 100, function(){
                            timer_width = timer_width+30;
                            animating = false;
                        });
                    }
                }
            }
        });


        function detectIntersection(a){

            // Récupération des informations de taille de l'item
            var offset_a = $("#"+a+"_barre_invisible").offset();
            var left_a = offset_a.left;
            var right_a = offset_a.left + $("#"+a+"_barre_invisible").width();
            var top_a = offset_a.top;
            var bottom_a = offset_a.top + $("#"+a+"_barre_invisible").height();

            // Pour chaque emplacement, on teste si l'item est présent
            // Pour éviter les conflits, on utilise la barre verticale invisible présente dans le div de la vue
            // Version temporaire avant de trouver une solution plus robuste

            var numero_emplacement = 0;
            var emplacement_trouve;
            // Pour chaque emplacement
            for(i=1;i<=tab_bonnes_reponses_environment.length;i++){
                emplacement_trouve = true;

                // Initialisation de l'indicateur d'intersection entre l'emplacement traité dans la boucle
                // et la barre invisible de l'item
                var existence_emplacement = document.getElementById("empl_item_"+i);
                // Si l'emplacement existe
                if(existence_emplacement){
                    // Récupération des informations de taille de l'emplacement de l'item
                    var offset_b = $("#empl_item_"+i).offset();
                    var left_b = offset_b.left;
                    var right_b = offset_b.left + $("#empl_item_"+i).width();
                    var top_b = offset_b.top;
                    var bottom_b = offset_b.top + $("#empl_item_"+i).height();

                    // Tests indiquant s'il y a intersection entre les éléments
                    if(right_a < left_b)
                        emplacement_trouve = false;
                    if(left_a > right_b)
                        emplacement_trouve = false;
                    if(bottom_a < top_b)
                        emplacement_trouve = false;
                    if(top_a > bottom_b)
                        emplacement_trouve = false;

                    if(emplacement_trouve){
                        numero_emplacement = i;
                        break;
                    }
                }
            }
            // On renvoie le numéro de l'emplacement d'intersection
            // Il peut être nul : pas d'intersection
            return numero_emplacement;
        }
        
        
       
        
    }

     function changeCursor(id, event){
         // On regarde ce que contient l'objet 'event'
         // alert(event.type);
         switch(event.type){
            case 'mouseover':
                document.getElementById(id).style.cursor = "move"; //url('commun_mouse_bon.png')";
                break;
        }
    }
    
    function replay_game(){
            $('#content').fadeOut(500, function(){
                window.location.href = 'index';
            });
        }

        function save_result(medal, game_id){

            var data_result = {
                medal : medal
                };

            $.ajax({
                // url vers la méthode de chargement du nouvel environnement
                url: 'saveResult',
                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                // Données à transmettre et mises en forme précédemment
                data: data_result,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue du nouvel environnement chargée par le controleur
                    //$('#controller_callback').html(msg);
                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                    //$('#controller_callback').fadeIn(2000, function(){
                        $('#content').fadeOut(2000, function(){
                            window.location.href = '../home/index';
                        });
                    //});
                }
            });
        }